<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 这种楼层标题的公共组件 -->
  <div
    class="Mall4j floor-title-container"
    :style="{'background': configMessage.background}"
  >
    <div
      class="common_floor_page"
      :style="setMarginStyle()"
    >
      <div class="common_floor_titles">
        <div class="left-content">
          <div
            class="main-title"
            :style="setMainStyle()"
          >
            {{ configMessage.mainContent.title }}
          </div>
          <div
            v-show="configMessage.showSubTitle === 0"
            class="other-title"
            :style="setSubStyle()"
          >
            {{ configMessage.subContent.title }}
          </div>
        </div>
        <div class="right-content">
          <div
            v-show="configMessage.showMore === 0"
            class="see-more"
            @click="handleMore"
          >
            <span :style="{color: configMessage.moreTextColor}">查看更多</span>
            <el-icon
              :style="{color: configMessage.moreTextColor}"
              class="el-icon-arrow-right"
            >
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { redirectPath } from '../../common/pageConfig.js'

const router = useRouter()

const props = defineProps({
  config: { // 配置信息
    type: Object,
    default: () => {}
  },
  type: { // 查看更多的类型
    type: String,
    default: () => ''
  }
})

const configMessage = ref({
  mainContent: { // 主标题配置内容
    title: '主标题',
    fontSize: '16px',
    color: '#333'
  },
  background: '', // 背景颜色
  marginTop: '', // 上边距
  marginBottom: '', // 下边距
  showMore: 0, // 查看更多是否展示
  path: {
    link: '',
    name: '',
    type: ''
  }, // 查看更多的链接
  moreTextColor: '#333', // 查看更多的文字颜色
  showSubTitle: 0, // 是否展示副标题
  subContent: { // 副标题配置内容
    title: '副标题',
    fontSize: '12px',
    color: '#999'
  }
})

watch(() => props.config, (newVal) => {
  if (JSON.stringify(newVal) !== '{}') {
    configMessage.value = newVal
  }
}, { immediate: true, deep: true })

// 主标题的样式
const setMainStyle = () => {
  const { fontSize, color } = configMessage.value.mainContent
  return {
    'font-size': fontSize,
    color
  }
}

// 副标题的样式
const setSubStyle = () => {
  const { fontSize, color } = configMessage.value.subContent
  return {
    'font-size': fontSize,
    color
  }
}

// 上下边距的样式
const setMarginStyle = () => {
  const { marginTop, marginBottom } = configMessage.value
  return {
    'margin-top': marginTop,
    'margin-bottom': marginBottom
  }
}

// 查看更多
const handleMore = () => {
  if (props.type === 'storeMore') {
    // 店铺的查看更多
    router.push({
      path: '/shop-list',
      query: {
        type: 1
      }
    })
  } else {
    redirectPath(router, configMessage.value)
  }
}

</script>

<style lang="scss" scoped>
.floor-title-container {
  width: 100%;
  overflow: hidden;
}
.common_floor_page {
  width: 100%;
}
.common_floor_titles {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  .left-content {
    display: flex;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    .main-title {
      font-family: Microsoft YaHei;
    }
    .other-title {
      margin-left: 12px;
      font-family: Microsoft YaHei;
      display: flex;
      align-items: flex-end;
    }
  }
  .right-content {
    .see-more {
      display: flex;
      align-items: center;
      cursor: pointer;
      span {
        font-size: 12px;
        color: #999;
        cursor: pointer;
        font-family: Microsoft YaHei;
      }
    }
  }
}
.right-content {
  .see-more {
    .el-icon-arrow-right {
      color: #999;
      font-size: 12px;
    }
  }
}

</style>
